// 获取左边帮助页面
var footer = document.getElementById('footer')
// 获取联系我们按钮
var consult = document.getElementById('consult')
// 获取右边页面
var right = document.getElementById('right')
// 获取右边所有的页面
var rights = document.getElementById('rights')
var rightChild = Array.from(right.firstElementChild.children)
rightChild.pop();

// 获取搜索页面
var searchs = document.getElementById('searchs')
// 获取左边帮助页面导航
var helpLi = footer.getElementsByTagName('li')
// 左边帮助页面每个导航添加点击事件
helpLi[0].firstChild.className = 'm-0 active'
for(var i =0; i<helpLi.length;i++){
    helpLi[i].index = i
    helpLi[i].onclick = function(){
        right.scrollTop = document.documentElement.scrollTop = 0; 
        for(var j = 0; j<helpLi.length;j++){
            helpLi[j].firstChild.className = 'm-0'
            rightChild[j].setAttribute('class',`right${j+1} hide`)
        }
        this.firstChild.className = 'm-0 active'
        searchs.style.display = 'none'
        rights.style.height = 'auto'
        rightChild[this.index].setAttribute('class',`right${this.index+1} hide show`)
    }
}

// 获取右边所有的小卡片
var right1 = document.getElementsByClassName('right1')[0]
var content = right1.getElementsByClassName('content')
for(var i =0; i<content.length;i++){
    content[i].index = i
    content[i].onclick = function(){
        right.scrollTop = document.documentElement.scrollTop = 0; 
        for(var j = 0; j<content.length;j++){
            rightChild[j].setAttribute('class',`right${j+1} hide`)
            helpLi[j].firstChild.className = 'm-0'
        }
        rightChild[this.index+1].setAttribute('class',`right${this.index+1} hide show`)
        helpLi[this.index+1].firstChild.className = 'm-0 active'
    }
}

var answer = right.querySelectorAll('.hide .bottom .answer')
answerOpen(answer)

var search = document.getElementById('search')
var answers = right.querySelectorAll('#searchs .answer')
answerOpen(answers)
search.onclick = function(){
    searchs.style.display = 'block'
    rights.style.height = searchs.offsetHeight+'px'
    rights.style.overflow = 'hidden'
    right.scrollTop = document.documentElement.scrollTop = 0;
}
var closes = document.getElementById('close')
closes.onclick = function(){
    rights.style.overflow = 'none'
    rights.style.height = 'auto'
    right.scrollTop = document.documentElement.scrollTop = 0;
    searchs.style.display = 'none'
}



var find = document.getElementById('find')
find.onfocus = function(){
    this.style.borderBottom = '1px solid #00A862'
}
find.onblur = function(){
    this.style.borderBottom = '1px solid #eee'
}
var hidd = document.getElementsByClassName('hidd')[0]
var nulls = document.getElementsByClassName('nulls')[0]
var commonProblem = document.getElementsByClassName('commonProblem')[0]
var com = JSON.parse(hidd.getAttribute('com'))
var searchs = document.getElementById('searchs')
// 获取搜索关键字

find.addEventListener('keydown', (e) => {
    if(e.keyCode == 13){
        if(find.value == ' '){
            alert('搜索框不能为空')
        }else{
            hidd.innerHTML = ''
            var xhr = new XMLHttpRequest();
            xhr.open('GET',`/help/searsh?searchText=${find.value}`,true);
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
            xhr.send();
            xhr.onreadystatechange = () => {
                var data = JSON.parse(xhr.responseText)
                if(data.length == 0 || find.value == ''){
                    nulls.style.display = 'block'
                    commonProblem.style.display = 'block'
                    for(var i=0;i<com.length;i++){
                        hidd.innerHTML += `
                            <div class="answer mb-3 p-3 col-12 bg-white shadow-sm">
                                <div class="problem d-flex justify-content-between">
                                    <p class="fs-4 m-0">${com[i].doubt}</p>
                                    <img src="${com[i].src}" alt="">
                                </div>
                                <div class="solution mt-4 pt-3"><div class="solutions"></div>${com[i].answer}</div>
                            </div>
                        `
                    }
                    rights.style.height = searchs.offsetHeight+'px'
                }else{
                    nulls.style.display = 'none'
                    commonProblem.style.display = 'none'
                    for(var i=0;i<data.length;i++){
                        hidd.innerHTML += `
                            <div class="answer mb-3 p-3 col-12 bg-white shadow-sm">
                                <div class="problem d-flex justify-content-between">
                                    <p class="fs-4 m-0">${data[i].doubt}</p>
                                    <img src="${data[i].src}" alt="">
                                </div>
                                <div class="solution mt-4 pt-3"><div class="solutions"></div>${data[i].answer}</div>
                            </div>
                        `
                    }
                    rights.style.height = searchs.offsetHeight+'px'
                }
                var sanswer = searchs.getElementsByClassName('answer')
                for(var i =0; i<sanswer.length;i++){
                    sanswer[i].setAttribute('rel',0)
                    sanswer[i].onclick = function(){
                        if(this.getAttribute('rel')==0){
                            this.firstElementChild.lastElementChild.style.transform = 'rotate(180deg)'
                            this.firstElementChild.lastElementChild.style.transition = 'all 0.5s'
                            this.lastElementChild.style.height = 'auto'
                            this.lastElementChild.firstElementChild.style.display = 'none'
                            this.setAttribute('rel',1)
                            rights.style.height = searchs.offsetHeight+'px'
                        }else{
                            this.firstElementChild.lastElementChild.style.transform = 'rotate(0deg)'
                            this.lastElementChild.style.height = '48px'
                            this.lastElementChild.firstElementChild.style.display = 'block'
                            this.setAttribute('rel',0)
                            rights.style.height = searchs.offsetHeight+'px'
                        }
                    }
                }
            }
        }
    }
})
function answerOpen(aa){
    for(var i =0; i<aa.length;i++){
        aa[i].setAttribute('rel',0)
        aa[i].onclick = function(){
            if(this.getAttribute('rel')==0){
                this.firstElementChild.lastElementChild.style.transform = 'rotate(180deg)'
                this.firstElementChild.lastElementChild.style.transition = 'all 0.5s'
                this.lastElementChild.style.height = 'auto'
                this.lastElementChild.firstElementChild.style.display = 'none'
                this.setAttribute('rel',1)
                if(aa == answers){
                    rights.style.height = searchs.offsetHeight+'px'
                }
            }else{
                this.firstElementChild.lastElementChild.style.transform = 'rotate(0deg)'
                this.lastElementChild.style.height = '48px'
                this.lastElementChild.firstElementChild.style.display = 'block'
                this.setAttribute('rel',0)
                if(aa == answers){
                    rights.style.height = searchs.offsetHeight+'px'
                }
            }
        }
    }
}
